<template>
  <transition appear name="slide-fade" :duration="animateDuration">
    <div
      class="tips_dialog"
      v-if="show"
      :style="{ '--bg-color': bgColor }"
      @mouseenter="removeAutoCloseTimer"
      @mousemove="removeAutoCloseTimer"
      @mouseleave="addAutoCloseTimer(1000)"
    >
      <i v-if="icon" :class="icon" />
      <span>{{ title || 'EMPTY' }}</span>
      <i v-if="!autoClose" class="ri-close-circle-line close_button" @click="close" />
    </div>
  </transition>
</template>

<script>
import { reactive, toRefs } from "vue";
import SafeCall from "../../utils/SafeCall.js";

export default {
  name: "TipsDialog",
  props: {
    title: String,
    icon: String,
    bgColor: {
      type: String,
      default: '#eac606'
    },
    onDestroy: {
      type: Function,
      required: true
    },
    showDuration: {
      type: Number,
      default: 3000
    },
    animateDuration: {
      type: Number,
      default: 300
    },
    autoClose: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    const data = reactive({
      show: true,
      autoCloseTimer: 0
    })

    const close = () => {
      data.show = false
      setTimeout(() => SafeCall(props.onDestroy), 300)
    }

    const addAutoCloseTimer = (duration) => data.autoCloseTimer = setTimeout(close, duration)
    const removeAutoCloseTimer = () => clearTimeout(data.autoCloseTimer)

    if (props.autoClose) addAutoCloseTimer(props.showDuration)
    return { ...toRefs(data), close, addAutoCloseTimer, removeAutoCloseTimer }
  }
}
</script>

<style lang="less">
.tips_dialog {
  --bg-color: #eac606;

  top: 5%;
  left: 0;
  right: 0;
  margin: 0 auto;

  z-index: 2000;
  position: fixed;
  width: -moz-fit-content;
  width: fit-content;
  padding: 16px 14px;
  border-radius: 7px;
  border: solid 3px black;
  background-color: var(--bg-color);

  gap: 12px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);

  & > span {
    font-weight: 900;
    text-align: center;
  }

  & > i {
    font-size: 22px;
    transition: all var(--animate-duration) ease;
  }

  & .close_button {
    cursor: pointer;

    &:hover {
      transform: scale(1.1);
    }
  }

  &:hover {
    box-shadow: 0 0 0 2px white;
  }
}
</style>